<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <span>快递单号：</span>
                    <el-input size="small" v-model="orderNum" placeholder="请输入要查询订单的快递单号"></el-input>
                </div>
                <div>
                    <span>收货电话：</span>
                    <el-input size="small" v-model="account" placeholder="请输入要查询订单的收货电话"></el-input>
                </div>
                <div>
                    <template>
                    <el-select size="small" v-model="factoryId" placeholder="选择厂商" @visible-change="getFactoryList" @change="searchByFactroyId">
                        <el-option v-for="item in factoryList":key="item.factoryId"
                        :label="item.factoryName"
                        :value="item.factoryId">
                        </el-option>
                    </el-select>
                    </template>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                    <el-button size="small" icon="el-icon-folder-add" @click="importHandle('in')">导入</el-button>
                    <el-button size="small" icon="el-icon-folder-add" @click="importHandle('out')">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="orderNumber" label="订单单号"></el-table-column>
                <el-table-column prop="customerName" label="收货人"></el-table-column>
                <el-table-column prop="customerTel" label="收货电话"></el-table-column>
                <el-table-column prop="customerAddress" label="收货地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="orderDate" label="下单时间"></el-table-column>
                <el-table-column prop="payDate" label="付款时间"></el-table-column>
                <el-table-column prop="realMoney" label="付款金额" width="100"></el-table-column>
                <el-table-column prop="deductSource" label="使用积分" width="100"></el-table-column>
                <el-table-column prop="usedBalance" label="使用余额" width="100"></el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.orderStatus == 1">已支付</el-tag>
                        <el-tag type="warning" v-if="scope.row.orderStatus == 0">未支付</el-tag>
                        <el-tag type="success" v-if="scope.row.orderStatus == 2">已发货</el-tag>
                        <el-tag type="success" v-if="scope.row.orderStatus == 3">已完成</el-tag>
                        <el-tag type="warning" v-if="scope.row.orderStatus == 4">已取消</el-tag>
                        <el-tag type="success" v-if="scope.row.orderStatus == 5">售后中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sendOrder" label="物流单号"></el-table-column>
                <el-table-column prop="sendComName" label="快递公司" width="100"></el-table-column>
                <el-table-column prop="sendUserName" label="发货操作人" width="100"></el-table-column>
                <el-table-column label="操作" width="240">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-tickets"
                            @click="orderHandle(scope.row, 'detail')">详情</el-button>
                        <el-button v-if="scope.row.orderStatus === 1" size="small" icon="el-icon-edit"
                            @click="orderHandle(scope.row, 'send')">发货</el-button>
                        <el-button v-if="scope.row.orderStatus === 2" size="small" icon="el-icon-edit"
                            @click="orderHandle(scope.row, 'send')">修改发货信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>


            <el-dialog :title="addFlag == 'send' ? '发货' : '订单详情'" :visible.sync="addDia"
                :width="addFlag == 'send' ? '30%' : '50%'" :before-close="closeDia">
                <template v-if="addFlag == 'send'">
                    <el-form :model="sendForm" :rules="sendRules" ref="send" label-width="100px">  
                        <!-- 物流公司下拉框 -->  
                        <el-form-item label="物流公司">  
                            <el-select v-model="sendForm.shipMethod" placeholder="请选择物流公司" @change="handleSelectChange">  
                                <el-option v-for="item in arr" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>  
                            </el-select>  
                        </el-form-item>  
                    
                        <!-- 物流单号输入框 -->  
                        <el-form-item label="物流单号" prop="orderNumber">  
                            <el-input v-model="sendForm.sendNumber" placeholder="请输入物流单号"
                                style="width: 220px;"></el-input>
                        </el-form-item>  
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="closeDia">取 消</el-button>
                        <el-button type="primary" @click="addSubmit">确 定</el-button>
                    </span>
                </template>

                <template v-else>
                    <div class="detailBox">
                        <div class="detailTop">
                            <span>
                                订单编号：{{ orderDetail.orderNumber }}
                            </span>

                            <span>
                                下单时间：{{ orderDetail.orderDate }}
                            </span>
                        </div>
                        <div class="ProCon">
                            <div>详情</div>
                            <div>
                                <el-table :data="orderDetail.list" border style="width: 100%">
                                    <el-table-column prop="productName" label="商品名"></el-table-column>
                                    <el-table-column prop="formatName" label="规格名"></el-table-column>
                                    <el-table-column prop="productNum" label="数量"></el-table-column>
                                    <el-table-column prop="productPrice" label="单价"></el-table-column>
                                    <el-table-column prop="productTotal" label="总价"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </template>
            </el-dialog>
            <el-dialog title="导入订单" :visible.sync="douDia" width="30%" :before-close="closeDouDia">
                <el-form ref="formRef" :model="formData" class="send-dialog-form">
                    <el-form-item prop="file" ref="uploadRef" label="导表">
                        <el-upload class="upload-demo" action="aa" :on-remove="fileRemove" :on-change="fileChange"
                            :auto-upload="false" name="file" accept=".xls" :limit="1" ref="addFile">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">*请上传xls文件</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDouDia">取 消</el-button>
                    <el-button type="primary" @click="addDouSubmit">确 定</el-button>
                </span>

            </el-dialog>

        </el-card>

    </div>
</template>

<script>

import { getOrderlist, getOrderInfoById, ship, importOrder,getFactory } from '../../network/order'

export default {
    data() {
        return {
            //操作员id 暂时写死
            tableData: [{
                product_name: 1
            }],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            addialogVisible: false,//弹窗
            orderNum: '',
            account: '',
            addDia: false,
            addFlag: '',//   detail  订单详情   send 发货
            sendForm: {
                sendUserId: sessionStorage.operatorId,
                id: '',
                shipMethod: '',
                sendNumber: '',
                sendCompanyName: '',
            },
            factoryList: []
            ,
            factoryId: null,
        
            sendRules: {
                shipMethod: [
                    { required: true, message: '请输入物流公司', trigger: 'blur' },
                ],
                sendNumber: [
                    { required: true, message: '请输入物流单号', trigger: 'blur' },
                ],
            },
            orderDetail: { //订单详情
                list: []
            },
            selectList: [],//勾选的订单

            douDia: false,//导表弹窗

            formData: {
                cover: ""
            },
            arr: [{
				code: 'SF',
				name: '顺丰'
			},
			{
				code: 'STO',
				name: '申通'
			},
			{
				code: 'YTO',
				name: '圆通'
			},
			{
				code: 'YD',
				name: '韵达'
			},
			{
				code: 'HHTT',
				name: '天天'
			},
			{
				code: 'EMS',
				name: 'EMS'
			},
			{
				code: 'ZTO',
				name: '中通'
			},
			{
				code: 'DBL',
				name: '德邦'
			},
			{
				code: 'JD',
				name: '京东快递'
			},
			{
				code: 'ZJS',
				name: '宅急送'
			},
			{
				code: 'FEDEX_GJ',
				name: 'Fedex国际'
			},
			{
				code: 'UPS',
				name: 'UPS国际快递'
			},
			{
				code: 'SURE',
				name: '速尔快递'
			},
			{
				code: 'XFEX',
				name: '信丰物流'
			},
			{
				code: 'UC',
				name: '优速快递'
			},
			{
				code: 'CNPEX',
				name: '中邮物流'
			},
			{
				code: 'AAE',
				name: 'AAE全球专递'
			},
			{
				code: 'DHL',
				name: 'DHL'
			},
			{
				code: 'FEDEX_GJ',
				name: 'DPEX国际快递'
			},
			{
				code: 'DSWL',
				name: 'D速物流'
			},
			{
				code: 'FEDEX',
				name: 'FEDEX国内快递'
			},
			{
				code: 'OCS',
				name: 'OCS'
			},
			{
				code: 'TNT',
				name: 'TNT'
			},
			{
				code: 'ycky',
				name: '远成快运'
			},
			{
				code: 'YZPY',
				name: '邮政快递'
			},
			{
				code: 'HTKY',
				name: '百世快运'
			}
			],
        
        };
    },
    methods: {
        handleSelectChange() {
      // 根据选中的物流公司代码，设置对应的物流公司名称
      const selectedOption = this.arr.find(item => item.code === this.sendForm.shipMethod);
      if (selectedOption) {
        this.sendForm.sendCompanyName = selectedOption.name;
      } else {
        this.sendForm.sendCompanyName = ''; // 如果没有找到对应的物流公司，清空物流公司名称
      }
    }
  ,getFactoryList(){
    getFactory({
        factoryName: null,
        CompanyId : null
    }).then(res=>{
        this.factoryList = res.data
    })
  },searchByFactroyId(){
    this.getList('search')
  },
        selectChange(val) {
            console.log(val);
            this.selectList = val
        },
        //  获取订单列表
        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.orderNum);
                console.log(this.account);
                getOrderlist({
                    companyId: sessionStorage.companyId,
                    orderNumber: this.orderNum,
                    account: this.account,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    factoryId :this.factoryId
                }).then(res => {
                    if (res.flag) {
                        this.tableData = res.data.list
                        this.totalNum = res.data.total
                        console.log(res);
                    }
                })


            } else if (flag == 'res') {
                this.tableData = []
                this.orderNum = ''
                this.account = ''
                this.pageNum = 1
                this.pageSize = 50
                this.$message.success('已重置')
            }
        },

        //   详情  发货
        orderHandle(obj, flag) {
            this.addFlag = flag
            if (flag == 'detail') {
                // 详情
                this.orderDetail = obj
                console.log(obj);
                
                console.log(this.orderDetail);
                getOrderInfoById({
                    orderNumber: obj.orderNumber,
                }).then(res => {
                    if (res.flag) {
                        this.orderDetail.list = res.data
                        this.$forceUpdate()
                    }
                })
            } else if (flag == 'send') {
                // 发货
                this.sendForm.id = obj.orderId
        
            }
            this.addDia = true
        },

        // 导表
        importHandle(flag) {
            if (flag == 'in') {
                this.addFlag = 'in'
                this.douDia = true
            } else if (flag == 'out') {
                if (this.selectList.length === 0) {
				return this.$message.warning('请勾选要导出的数据')
			}
			let Ids = ''
			for (let i = 0; i < this.selectList.length; i++) {
				Ids += this.selectList[i].orderId + ','
			}
			window.location.href =
				'http://192.168.0.104:2036/ScOrder/exportOrder?Ids=' +
				Ids

            }

        },

        // 导表确认
        addDouSubmit() {
            if (this.formData.cover == '') {
                this.$message.warning('请上传文件')
                return
            }
            let fd = new FormData();
            fd.append("operatorId", sessionStorage.operatorId);
			fd.append("file", this.formData.cover);
            importOrder(fd).then(res => {
                if (res.flag) {
                    this.fileRemove();
                    this.closeDouDia()
                    this.getList('search');
                } else {
                    alert(res.message)
                }
            })
        },

        fileRemove(file, fileList) {
            this.formData = {
                cover: ""
            };
        },
        fileChange(file, fileList) {
            let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
            console.log(fileType);

            if (fileType == 'xls') {
                this.formData.cover = file.raw;
            } else {
                // 提醒只能上传的文件类型
                this.$message.warning('只能上传xls文件')
                return;
            }
        },

        closeDia() {
            this.addDia = false
            if (this.addFlag == 'send') {
                this.$refs.send.resetFields();
            }
        },
        closeDouDia() {
            this.douDia = false
            this.formData.cover = ''
        },
        //确认发货
        addSubmit() {
            this.$refs.send.validate((valid) => {
                if (!valid) return
                console.log(this.sendForm);
                ship(this.sendForm).then(res => {
                    if (res.flag) {
                        console.log(res);
                        this.closeDia()
                        this.getList('search')
                        this.$message.success('发货成功')

                    }
                })
            });

        },

        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },

    },
    created() {

        this.getList('search')

    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}



.detailBox {
    width: 100%;
    /* height: 80vh; */
    /* background: #f2f2f2; */
    overflow-y: scroll;

}

.detailBox::-webkit-scrollbar {
    display: none;
}


.detailTop {
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    color: #333;
    border-bottom: 5px solid #F1F2F6;
    /* font-weight: bold; */
}

.detailTop>span {
    margin-right: 16px;
}


.ProCon {
    margin-top: 24px;
}

.ProCon>div {
    display: flex;
    margin-bottom: 16px;
    font-size: 16px;
    color: #333;
}

.ProCon>div:first-child::before {
    margin-right: 10px;
    content: '';
    width: 4px;
    height: 16px;

    background: #3E68FF;
    border-radius: 2px;
    border: 1px solid #3E68FF;


}
</style>